<template>
  <div>
    <!-- 背景音乐 -->
    <aplayer   :narrow="true" style="position:absolute;top:65px;left:0;z-index:10;"  :music="{
          title: '猫嗅音乐场',
          author: '猫嗅科技',
          url: data.baseLists.bgMusic,
          lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
        }">    
    </aplayer>
  </div>
</template>
<script type="application/ecmascript">
import Aplayer from 'vue-aplayer'
import { mapState} from 'vuex'
export default {
    components: {
      Aplayer,
    },
    name: 'HeaderBgImg',
    computed: {
      ...mapState({
        data:state => state.moduleEdit.data,
      }),
    },
}
</script>
<style lang="scss">
  .aplayer-pic {
    position: relative;
    float: left;
    .aplayer-play {
      border:0;
      .aplayer-icon-play {
        border:0;
        display: inline-block;
        width: 35px;
        height: 35px;
        background: url('http://wx.jlmgps.com/app/themes/vcard03/static/images/stop.png') no-repeat center center;
        background-size: 100% auto;
        position: fixed;
        z-index: 100;
        left: 10px;
        top: 57px;
      }
    }
    .aplayer-pause {
      border:0;
      .aplayer-icon-pause {
        border:0;
          display: inline-block;
          width: 35px;
          height: 35px;
          background: url('http://wx.jlmgps.com/app/themes/vcard03/static/images/play.png') no-repeat center center;
          background-size: 100% auto;
          position: fixed;
          z-index: 100;
          left: 10px;
          top: 57px;
      }
    }
  }

</style>